<template>
  <div class="container">
    <!-- 页面头部 -->
    <img
      class="hometop"
      src="https://lesson.iapeap.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20251017103006_399_138.png"
      alt=""
    />
    <div class="banner" @click="opentp">
      <img class="" src="https://lesson.iapeap.com/5555.png" alt="" />
    </div>
    <div class="content">
      <!-- 轮播图 -->
      <!-- <div
        class="slider-container"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
        @mousedown="handleMouseDown"
        @mousemove="handleMouseMove"
        @mouseup="handleMouseUp"
        @mouseleave="handleMouseLeave"
      >
        <div
          class="slider"
          :style="{
            transform: `translateX(${translateX}px)`,
            transition: isDragging
              ? 'none'
              : 'transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
          }"
        >
          <div
            class="slide"
            style="
              background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
            "
          >
            <div class="slide-overlay"></div>
            <div class="slide-content">
              <h2 class="slide-title">专业心理危机干预</h2>
              <p class="slide-desc">
                提供24/7专业心理咨询服务，守护您的心灵健康
              </p>
              <button
                class="slide-btn"
                @click="showSlideDetail('专业心理危机干预')"
              >
                了解详情
              </button>
            </div>
          </div>

          <div
            class="slide"
            style="
              background: linear-gradient(135deg, #f72585 0%, #b5179e 100%);
            "
          >
            <div class="slide-overlay"></div>
            <div class="slide-content">
              <h2 class="slide-title">紧急援助通道</h2>
              <p class="slide-desc">遇到心理危机时，一键获取专业帮助</p>
              <button
                class="slide-btn"
                @click="showSlideDetail('紧急援助通道')"
              >
                立即求助
              </button>
            </div>
          </div>

          <div
            class="slide"
            style="
              background: linear-gradient(135deg, #4cc9f0 0%, #3a0ca3 100%);
            "
          >
            <div class="slide-overlay"></div>
            <div class="slide-content">
              <h2 class="slide-title">自我关爱课程</h2>
              <p class="slide-desc">学习自我调节技巧，提升心理韧性</p>
              <button
                class="slide-btn"
                @click="showSlideDetail('自我关爱课程')"
              >
                查看课程
              </button>
            </div>
          </div>
        </div>

        <div class="slider-nav">
          <div
            v-for="(dot, index) in 3"
            :key="index"
            :class="['nav-dot', { active: currentSlide === index }]"
            @click="setSlide(index)"
          ></div>
        </div>
      </div> -->

      <!-- 功能栏 -->
      <div class="features">
        <div class="section-title">
          <div class="title-icon">
            <i class="fas fa-th-large"></i>
          </div>
          <h2>核心功能</h2>
          <div class="title-line"></div>
        </div>

        <div class="features-grid">
          <!-- 功能1 -->
          <div class="feature-card" @click="openyjzj">
            <div class="feature-icon">
              <i class="fas fa-exchange-alt"></i>
            </div>
            <h3 class="feature-title">一键转介</h3>
            <p class="feature-desc">快速转接</p>
            <div class="feature-hover">
              <i class="fas fa-arrow-right"></i>
            </div>
          </div>

          <!-- 功能2 -->
          <div class="feature-card" @click="opentp">
            <div class="feature-icon">
              <i class="fas fa-users"></i>
            </div>
            <h3 class="feature-title">进入他评</h3>
            <p class="feature-desc">多角度评估</p>
            <div class="feature-hover">
              <i class="fas fa-arrow-right"></i>
            </div>
          </div>

          <!-- 功能3 -->
          <div class="feature-card" @click="confirmSwitch">
            <div class="feature-icon">
              <i class="fas fa-heart"></i>
            </div>
            <h3 class="feature-title">自我关爱</h3>
            <p class="feature-desc">自我关怀</p>
            <div class="feature-hover">
              <i class="fas fa-arrow-right"></i>
            </div>
          </div>

          <!-- 功能4 -->
          <div class="feature-card" @click="openwjgalb">
            <div class="feature-icon">
              <i class="fas fa-user-injured"></i>
            </div>
            <h3 class="feature-title">重点个案</h3>
            <p class="feature-desc">跟进管理</p>
            <div class="feature-hover">
              <i class="fas fa-arrow-right"></i>
            </div>
          </div>

          <!-- 功能5 -->
          <div class="feature-card" @click="opensjkb">
            <div class="feature-icon">
              <i class="fas fa-chart-line"></i>
            </div>
            <h3 class="feature-title">数据分析</h3>
            <p class="feature-desc">专业报告</p>
            <div class="feature-hover">
              <i class="fas fa-arrow-right"></i>
            </div>
          </div>

          <!-- 功能6 -->
          <div class="feature-card" @click="openwjgyzl">
            <div class="feature-icon">
              <i class="fas fa-exclamation-triangle"></i>
            </div>
            <h3 class="feature-title">风险指南</h3>
            <p class="feature-desc">危机干预资料</p>
            <div class="feature-hover">
              <i class="fas fa-arrow-right"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 推荐课程 -->
      <div class="recommendations">
        <div class="section-title">
          <div class="title-icon">
            <i class="fas fa-graduation-cap"></i>
          </div>
          <h2>推荐课程</h2>
          <div class="title-line"></div>
        </div>

        <div class="courses-list">
          <!-- 动态课程卡片 -->
          <div
            v-for="(course, index) in recommendCourses"
            :key="course.id"
            class="course-card"
            :class="{ disabled: course.state === 0 }"
          >
            <div
              class="course-img"
              :style="{ backgroundImage: `url(${course.banner})` }"
            >
              <div class="course-tag">{{ course.tag }}</div>
            </div>
            <div class="course-content">
              <h3 class="course-title">{{ course.title }}</h3>
              <div class="course-meta">
                <div><i class="fas fa-clock"></i> {{ course.days }}天</div>
                <div>
                  <i class="fas fa-user-graduate"></i>
                  {{ getDifficultyText(course.difficultyLevel) }}
                </div>
              </div>
              <p class="course-desc">{{ course.info }}</p>
              <div class="course-footer">
                <div class="course-stats">
                  <div class="course-price">
                    <span v-if="course.price === 0" class="price-free"
                      >免费</span
                    >
                    <span v-else class="price-amount">¥{{ course.price }}</span>
                  </div>
                </div>
                <button
                  class="enroll-btn"
                  :class="{ disabled: course.isCheckIn === 1 }"
                  @click="enrollCourse(course, $event)"
                  :disabled="course.isCheckIn === 1"
                >
                  {{ course.isCheckIn === 1 ? "已报名" : "报名" }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 切换确认模态框 -->
    <div v-if="showSwitchModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>切换确认</h3>
          <button class="modal-close" @click="closeModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="modal-icon">
            <i class="fas fa-exchange-alt"></i>
          </div>
          <p>是否确定切换到员工端？</p>
          <p class="modal-tip">切换后您将进入员工端界面</p>
        </div>
        <div class="modal-footer">
          <button class="btn-cancel" @click="closeModal">取消</button>
          <button class="btn-confirm" @click="confirmSwitch">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecommendCourseList } from "@/api/manager";
import { getZdmemberUserByID } from "@/api/index";

export default {
  name: "HomePage",
  data() {
    return {
      currentSlide: 0,
      slideInterval: null,
      recommendCourses: [], // 存储推荐课程数据
      // 手动滑动相关数据
      isDragging: false,
      startX: 0,
      currentX: 0,
      translateX: 0,
      sliderWidth: 0,
      slideCount: 3,

      // 新增：模态框显示状态
      showSwitchModal: false,
    };
  },
  mounted() {
    if (!localStorage.getItem("userId")) {
      alert("请先登录");
      setTimeout(() => {
        this.$router.push("/");
      }, 1000);
      return;
    }
    this.getZdmemberUserByID();
    // 启动轮播图自动播放
    this.startSlider();

    // 获取推荐课程
    this.ongetRecommendCourseList();

    // 添加功能卡片点击事件
    const featureCards = document.querySelectorAll(".feature-card");
    featureCards.forEach((card) => {
      card.addEventListener("click", function () {
        const featureTitle = this.querySelector(".feature-title").textContent;
        // alert(`即将打开: ${featureTitle} 功能`);
      });
    });

    // 初始化轮播图宽度
    this.$nextTick(() => {
      this.updateSliderWidth();
      window.addEventListener("resize", this.updateSliderWidth);
    });
  },
  beforeDestroy() {
    // 清除定时器
    if (this.slideInterval) {
      clearInterval(this.slideInterval);
    }
    window.removeEventListener("resize", this.updateSliderWidth);
  },
  methods: {
    getZdmemberUserByID() {
      let data = {
        id: localStorage.getItem("userId"),
      };
      getZdmemberUserByID(data).then((res) => {
        if (res.code === 200) {
          localStorage.setItem("unitId", res.data.unitId);
          localStorage.setItem("manager", res.data.manager);
          localStorage.setItem("userinfo", JSON.stringify(res.data));
        } else {
          this.$toast?.("获取用户信息失败");
        }
      });
    },
    // 获取推荐课程列表
    ongetRecommendCourseList() {
      // 模拟接口调用，实际应该调用真实的API
      getRecommendCourseList({
        userId: localStorage.getItem("userId"),
        userType: 1,
      }).then((res) => {
        if (res.code === 200) {
          this.recommendCourses = res.data;
        } else {
          this.$toast?.("获取推荐课程列表失败");
        }
      });
    },

    // 获取难度等级文本
    getDifficultyText(level) {
      const levels = {
        1: "初级",
        2: "中级",
        3: "高级",
      };
      return levels[level] || "初级";
    },

    // 轮播图相关方法
    startSlider() {
      this.slideInterval = setInterval(() => {
        if (!this.isDragging) {
          this.currentSlide = (this.currentSlide + 1) % this.slideCount;
          this.updateTranslateX();
        }
      }, 4000);
    },
    setSlide(index) {
      // 重置自动轮播计时器
      clearInterval(this.slideInterval);
      this.currentSlide = index;
      this.updateTranslateX();
      this.startSlider();
    },
    showSlideDetail(title) {
      alert(`查看详情: ${title}`);
    },

    // 更新轮播图宽度
    updateSliderWidth() {
      const sliderContainer = this.$el.querySelector(".slider-container");
      if (sliderContainer) {
        this.sliderWidth = sliderContainer.offsetWidth;
        this.updateTranslateX();
      }
    },

    // 更新平移位置
    updateTranslateX() {
      this.translateX = -this.currentSlide * this.sliderWidth;
    },

    // 触摸事件处理
    handleTouchStart(e) {
      this.isDragging = true;
      this.startX = e.touches[0].clientX;
      this.currentX = this.startX;
      clearInterval(this.slideInterval);
    },

    handleTouchMove(e) {
      if (!this.isDragging) return;

      e.preventDefault();
      this.currentX = e.touches[0].clientX;
      const diff = this.currentX - this.startX;
      this.translateX = -this.currentSlide * this.sliderWidth + diff;
    },

    handleTouchEnd() {
      if (!this.isDragging) return;

      this.isDragging = false;
      const diff = this.currentX - this.startX;
      const threshold = this.sliderWidth * 0.2; // 滑动阈值

      if (Math.abs(diff) > threshold) {
        if (diff > 0) {
          // 向右滑动，上一张
          this.currentSlide = Math.max(0, this.currentSlide - 1);
        } else {
          // 向左滑动，下一张
          this.currentSlide = Math.min(
            this.slideCount - 1,
            this.currentSlide + 1
          );
        }
      }

      this.updateTranslateX();
      this.startSlider();
    },

    // 鼠标事件处理（为桌面端提供支持）
    handleMouseDown(e) {
      this.isDragging = true;
      this.startX = e.clientX;
      this.currentX = this.startX;
      clearInterval(this.slideInterval);
    },

    handleMouseMove(e) {
      if (!this.isDragging) return;

      this.currentX = e.clientX;
      const diff = this.currentX - this.startX;
      this.translateX = -this.currentSlide * this.sliderWidth + diff;
    },

    handleMouseUp() {
      if (!this.isDragging) return;

      this.isDragging = false;
      const diff = this.currentX - this.startX;
      const threshold = this.sliderWidth * 0.2; // 滑动阈值

      if (Math.abs(diff) > threshold) {
        if (diff > 0) {
          // 向右滑动，上一张
          this.currentSlide = Math.max(0, this.currentSlide - 1);
        } else {
          // 向左滑动，下一张
          this.currentSlide = Math.min(
            this.slideCount - 1,
            this.currentSlide + 1
          );
        }
      }

      this.updateTranslateX();
      this.startSlider();
    },

    handleMouseLeave() {
      if (this.isDragging) {
        this.isDragging = false;
        this.updateTranslateX();
        this.startSlider();
      }
    },

    // 功能跳转方法
    openyjzj() {
      this.$router.push({ name: "管理者-一键转介" });
    },
    opentp() {
      this.$router.push("/managerHome2");
    },
    openwjgalb() {
      this.$router.push({ name: "管理者-危机个案列表" });
    },
    // 修改：点击自我关爱时显示确认模态框
    showSwitchConfirm() {
      this.showSwitchModal = true;
    },
    opensjkb() {
      this.$router.push({ name: "员工数据看板" });
    },
    openwjgyzl() {
      this.$router.push("/weijichat");
    },
    gomy() {
      this.$router.push({ name: "管理者-我的" });
    },

    // 新增：模态框相关方法
    closeModal() {
      this.showSwitchModal = false;
    },

    confirmSwitch() {
      this.showSwitchModal = false;
      // 执行跳转到员工端
      this.$router.push({ name: "员工端-首页" });
    },

    // 课程报名
    enrollCourse(course, event) {
      event.stopPropagation(); // 阻止事件冒泡到课程卡片
      console.log("开始报名", JSON.stringify(course));
      this.$router.push({
        path: "/tjkchb",
        query: {
          course: JSON.stringify(course),
        },
      });
    },
  },
};
</script>

<style scoped>
/* 全局样式 */

.container {
  max-width: 500px;
  margin: 0 auto;
  padding-bottom: 20px;
  background: linear-gradient(to bottom, #f0f4f8, #e2e8f0);
  background-image: url("https://lesson.iapeap.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20251017103043_402_138.jpg");
  background-size: 100% 100%;
}

.hometop {
  width: 208px;
  height: 88px;
}
.banner {
  display: flex;
  justify-content: center;
}
.banner img {
  width: 375px;
  height: 185px;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  font-size: 1.5rem;
  color: #4f46e5;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.2);
}

.logo-text h1 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.5px;
}

.logo-text p {
  color: #64748b;
  font-size: 0.8rem;
  margin-top: 2px;
  font-weight: 500;
}

/* 内容区域 */
.content {
  padding: 0 12px;
  box-sizing: border-box;
}

/* 轮播图样式 */
.slider-container {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  height: 160px; /* 降低高度适应手机 */
  margin: 15px 0 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.slider-container:active {
  cursor: grabbing;
}

.slider {
  display: flex;
  height: 100%;
  will-change: transform;
}

.slide {
  min-width: 100%;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
}

.slide-content {
  padding: 0 20px;
  color: white;
  z-index: 2;
  width: 100%;
  animation: fadeInUp 0.8s ease;
}

.slide-title {
  font-size: 1.3rem; /* 减小字体 */
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.3px;
}

.slide-desc {
  font-size: 0.85rem; /* 减小字体 */
  margin-bottom: 16px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  line-height: 1.4;
}

.slide-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #4f46e5;
  border: none;
  padding: 8px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(5px);
}

.slide-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  background: white;
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  z-index: 1;
}

.slider-nav {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.nav-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-dot.active {
  background: white;
  transform: scale(1.2);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* 功能栏样式 */
.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0px 0 15px;
  position: relative;
}

.title-icon {
  color: #4f46e5;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.15);
}

.section-title h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  position: relative;
}

.title-line {
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(to right, #e2e8f0, transparent);
  margin-left: 8px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px; /* 减小间隙 */
  margin-bottom: 25px;
}

.feature-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 8px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.03), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.feature-icon {
  font-size: 1.6rem;
  margin-bottom: 12px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.05);
}

.feature-card:nth-child(1) .feature-icon {
  background: linear-gradient(
    135deg,
    rgba(79, 70, 229, 0.15),
    rgba(124, 58, 237, 0.15)
  );
  color: #4f46e5;
}

.feature-card:nth-child(2) .feature-icon {
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.15),
    rgba(168, 85, 247, 0.15)
  );
  color: #8b5cf6;
}

.feature-card:nth-child(3) .feature-icon {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.15),
    rgba(249, 115, 22, 0.15)
  );
  color: #ef4444;
}

.feature-card:nth-child(4) .feature-icon {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.15),
    rgba(5, 150, 105, 0.15)
  );
  color: #10b981;
}

.feature-card:nth-child(5) .feature-icon {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.15),
    rgba(217, 119, 6, 0.15)
  );
  color: #f59e0b;
}

.feature-card:nth-child(6) .feature-icon {
  background: linear-gradient(
    135deg,
    rgba(101, 163, 13, 0.15),
    rgba(77, 124, 15, 0.15)
  );
  color: #65a30d;
}

.feature-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #1e293b;
}

.feature-desc {
  font-size: 0.75rem;
  color: #64748b;
}

.feature-hover {
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
  background: #4f46e5;
  color: white;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  font-size: 0.8rem;
}

.feature-card:hover .feature-hover {
  right: 10px;
  opacity: 1;
}

/* 推荐课程样式 */
.recommendations {
  margin-bottom: 50px;
}

.courses-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.course-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.course-card.disabled {
  opacity: 0.6;
  filter: grayscale(0.3);
}

.course-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.03), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.course-card:hover::before {
  opacity: 1;
}

.course-card:hover:not(.disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.course-img {
  height: 120px; /* 降低图片高度 */
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #f8fafc;
}

.course-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* 课程状态标签 */
.course-state {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  z-index: 2;
}

.state-offline {
  background: rgba(107, 114, 128, 0.8);
}

.state-checkin {
  background: rgba(16, 185, 129, 0.8);
}

.course-content {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.course-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1e293b;
  line-height: 1.3;
}

.course-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  color: #64748b;
  flex-wrap: wrap;
}

.course-meta div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.course-desc {
  flex-grow: 1;
  margin-bottom: 12px;
  color: #475569;
  line-height: 1.5;
  font-size: 0.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-stats {
  display: flex;
  gap: 12px;
}

.course-stats div {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: #64748b;
}

.course-price {
  display: flex;
  align-items: center;
}

.price-free {
  font-size: 0.95rem;
  font-weight: 700;
  color: #10b981;
}

.price-amount {
  font-size: 0.95rem;
  font-weight: 700;
  color: #4f46e5;
}

.enroll-btn {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.8rem;
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.3);
  position: relative;
  z-index: 10;
}

.enroll-btn:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(79, 70, 229, 0.4);
}

.enroll-btn:disabled,
.enroll-btn.disabled {
  background: #cbd5e1 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

.enroll-btn.disabled:hover {
  transform: none;
  box-shadow: none;
}

/* 新增：模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: white;
  border-radius: 16px;
  width: 300px;
  max-width: 90%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: slideUp 0.3s ease;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 10px;
  border-bottom: 1px solid #f1f5f9;
}

.modal-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #64748b;
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: #f1f5f9;
  color: #475569;
}

.modal-body {
  padding: 20px;
  text-align: center;
}

.modal-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  color: white;
  font-size: 1.5rem;
}

.modal-body p {
  font-size: 1rem;
  color: #334155;
  margin-bottom: 8px;
  font-weight: 500;
}

.modal-tip {
  font-size: 0.85rem !important;
  color: #64748b !important;
  font-weight: normal !important;
}

.modal-footer {
  display: flex;
  padding: 0 20px 20px;
  gap: 12px;
}

.btn-cancel,
.btn-confirm {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.btn-cancel {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.btn-cancel:hover {
  background: #f1f5f9;
  color: #475569;
}

.btn-confirm {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.3);
}

.btn-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4);
}

/* 模态框动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 380px) {
  body {
    font-size: 13px;
  }

  .content {
    padding: 0 10px;
  }

  .header {
    padding: 10px 12px;
  }

  .logo-icon {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
  }

  .logo-text h1 {
    font-size: 1.1rem;
  }

  .slider-container {
    height: 140px;
    margin: 12px 0 18px;
    border-radius: 12px;
  }

  .slide-title {
    font-size: 1.1rem;
  }

  .slide-desc {
    font-size: 0.75rem;
    margin-bottom: 12px;
  }

  .slide-btn {
    padding: 6px 14px;
    font-size: 0.75rem;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .feature-card {
    padding: 14px 6px;
    border-radius: 12px;
  }

  .feature-icon {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    margin-bottom: 10px;
  }

  .feature-title {
    font-size: 0.85rem;
  }

  .feature-desc {
    font-size: 0.7rem;
  }

  .section-title {
    margin: 20px 0 12px;
  }

  .title-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }

  .section-title h2 {
    font-size: 1.1rem;
  }

  .course-img {
    height: 100px;
  }

  .course-content {
    padding: 12px;
  }

  .course-title {
    font-size: 0.9rem;
  }

  .course-meta {
    font-size: 0.75rem;
    gap: 8px;
  }

  .course-desc {
    font-size: 0.75rem;
  }

  .enroll-btn {
    padding: 5px 12px;
    font-size: 0.75rem;
  }

  .modal-content {
    width: 280px;
  }

  .modal-header {
    padding: 15px 15px 8px;
  }

  .modal-body {
    padding: 15px;
  }

  .modal-footer {
    padding: 0 15px 15px;
  }
}

/* 超小屏幕适配 */
@media (max-width: 320px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .feature-card {
    padding: 12px 4px;
  }

  .feature-icon {
    width: 40px;
    height: 40px;
    font-size: 1.3rem;
  }

  .slider-container {
    height: 130px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 添加一些微妙的动画 */
.feature-card,
.course-card {
  animation: fadeInUp 0.5s ease;
}

.feature-card:nth-child(1) {
  animation-delay: 0.05s;
}
.feature-card:nth-child(2) {
  animation-delay: 0.1s;
}
.feature-card:nth-child(3) {
  animation-delay: 0.15s;
}
.feature-card:nth-child(4) {
  animation-delay: 0.2s;
}
.feature-card:nth-child(5) {
  animation-delay: 0.25s;
}
.feature-card:nth-child(6) {
  animation-delay: 0.3s;
}

.course-card:nth-child(1) {
  animation-delay: 0.1s;
}
.course-card:nth-child(2) {
  animation-delay: 0.2s;
}
.course-card:nth-child(3) {
  animation-delay: 0.3s;
}
</style>
